<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- START SIGMA IMPORTS -->
<script src="../src/sigma.core.js"></script>
<script src="../src/conrad.js"></script>
<script src="../src/utils/sigma.utils.js"></script>
<script src="../src/utils/sigma.polyfills.js"></script>
<script src="../src/sigma.settings.js"></script>
<script src="../src/classes/sigma.classes.dispatcher.js"></script>
<script src="../src/classes/sigma.classes.configurable.js"></script>
<script src="../src/classes/sigma.classes.graph.js"></script>
<script src="../src/classes/sigma.classes.camera.js"></script>
<script src="../src/classes/sigma.classes.quad.js"></script>
<script src="../src/classes/sigma.classes.edgequad.js"></script>
<script src="../src/captors/sigma.captors.mouse.js"></script>
<script src="../src/captors/sigma.captors.touch.js"></script>
<script src="../src/renderers/sigma.renderers.canvas.js"></script>
<script src="../src/renderers/sigma.renderers.webgl.js"></script>
<script src="../src/renderers/sigma.renderers.svg.js"></script>
<script src="../src/renderers/sigma.renderers.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.utils.js"></script>
<script src="../src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="../src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="../src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="../src/middlewares/sigma.middlewares.copy.js"></script>
<script src="../src/misc/sigma.misc.animation.js"></script>
<script src="../src/misc/sigma.misc.bindEvents.js"></script>
<script src="../src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="../src/misc/sigma.misc.drawHovers.js"></script>
<!-- END SIGMA IMPORTS -->
<script src="../plugins/sigma.plugins.colorbrewer/sigma.plugins.colorbrewer.js"></script>
<script src="../plugins/sigma.plugins.design/sigma.plugins.design.js"></script>

<script src="../plugins/sigma.renderers.linkurious/settings.js"></script>
<script src="../plugins/sigma.renderers.linkurious/webgl/sigma.webgl.nodes.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="../plugins/sigma.renderers.linkurious/webgl/sigma.webgl.edges.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/webgl/sigma.webgl.edges.fast.js"></script>
<script src="../plugins/sigma.renderers.linkurious/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.labels.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.hovers.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.cross.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.diamond.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.equilateral.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.square.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.star.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.curve.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.curvedArrow.js"></script>

<script src="../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.dashed.js"></script>
<script src="../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.dotted.js"></script>
<script src="../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.parallel.js"></script>
<script src="../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edges.tapered.js"></script>
<script src="../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.dashed.js"></script>
<script src="../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.dotted.js"></script>
<script src="../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.parallel.js"></script>
<script src="../plugins/sigma.renderers.customEdgeShapes/sigma.canvas.edgehovers.tapered.js"></script>

<!-- we force the loading of the font awesome -->
<i class="fa fa-camera-retro fa-1x" style="color: rgba(0,0,0,0);"></i>

<div id="container">
  <style>
    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
    }
  </style>
  <div id="graph-container"></div>
</div>

<script>
/**
 * This is a basic example on how to instantiate sigma. A random graph is
 * generated and stored in the "graph" variable, and then sigma is instantiated
 * directly with the graph.
 *
 * The simple instance of sigma is enough to apply it render the graph on the on
 * the screen, since the graph is given directly to the constructor.
 */
var i,
    s,
    N = 10,
    E = 50,
    g = {
      nodes: [],
      edges: []
    };

// Generate a random graph:
for (i = 0; i < N; i++)
  g.nodes.push({
    id: i,
    label: 'Node ' + i,
    x: Math.random()*100,
    y: Math.random()*100,
    size: 1,
    color: '#666',
    data: {
      quantity: Math.random(),
      quality: ['A', 'B', 'C'][Math.random() * 3 | 0]
    }
  });

for (i = 0; i < E; i++)
  g.edges.push({
    id: i,
    source: (Math.random() * N | 0),
    target: (Math.random() * N | 0),
    size: Math.random(),
    color: '#ccc',
    data: {
      quantity: Math.random(),
      quality: ['A', 'B', 'C'][Math.random() * 3 | 0]
    }
  });

// Create a custom color palette:
var myPalette = {
  aQualitativeScheme: {
    'A': '#7fc97f',
    'B': '#beaed4',
    'C': '#fdc086'
  },
  colorbrewer: {
    sequentialGreen: sigma.plugins.colorbrewer.BuGn
  },
  ggplot2: {
    sequentialBlue: {
      7: ['#132b43','#1d3f5d','#27547a','#326896','#3d7fb5','#4897d4','#54aef3']
    },
  },
  aSetScheme: {
    7: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628"]
  },
  nodeTypeScheme: {
    'A': 'square',
    'B': 'diamond',
    'C': 'star'
  },
  edgeTypeScheme: {
    'A': 'tapered'
  },
  imageScheme: {
    'A': {
      url: 'img/img1.png',
      // scale/clip are ratio values applied on top of 'size'
      scale: 1.3,
      clip: 0.85
    },
    'B': {
      url: 'img/img2.png',
      scale: 1.3,
      clip: 0.85
    },
    'C': {
      url: 'img/img3.png',
      scale: 1.3,
      clip: 0.85
    }
  },
  iconScheme: {
    'A': {
      font: 'FontAwesome',
      scale: 1.0,
      color: '#fff',
      content: "\uF11b"
    },
    'B': {
      font: 'FontAwesome',
      scale: 1.0,
      color: '#fff',
      content: "\uF11c"
    },
    'C': {
      font: 'FontAwesome',
      scale: 1.0,
      color: '#fff',
      content: "\uF11d"
    }
  }
};

var myStyles = {
  nodes: {
    label: {
      by: 'id',
      format: function(value) { return '#' + value; }
    },
    size: {
      by: 'data.quantity',
      bins: 7,
      min: 5,
      max: 30
    },
    color: {
      by: 'data.quality',
      scheme: 'aQualitativeScheme'
    },
    type: {
      by: 'data.quality',
      scheme: 'nodeTypeScheme'
    },
    // either image or icon:
    // image: {
    //   by: 'data.quality',
    //   scheme: 'imageScheme'
    // },
    icon: {
      by: 'data.quality',
      scheme: 'iconScheme'
    }
  },
  edges: {
    color: {
      by: 'data.quantity',
      scheme: 'ggplot2.sequentialBlue', // alt: colorbrewer.sequentialGreen
      bins: 7
    },
    size: {
      by: 'data.quantity',
      bins: 7,
      min: 1,
      max: 5
    },
    type: { // not implemented in webgl renderer
      by: 'data.quality',
      scheme: 'edgeTypeScheme'
    }
  }
};

function init () {
  // Instantiate sigma:
  s = new sigma({
    graph: g,
    renderer: {
      container: document.getElementById('graph-container'),
      // type: 'canvas'
    },
    settings: {
      minNodeSize: 1,
      maxNodeSize: 5,
    }
  });

  // Instanciate the design:
  var design = sigma.plugins.design(s, {
    styles: myStyles,
    palette: myPalette
  });

  design.apply();

  // The visual variables currently applied to the nodes
  var activeNodeStyles = {};
  Object.keys(design.styles.nodes).forEach(function (visualVariable) {
    if (design.styles.nodes[visualVariable].active) {
      activeNodeStyles[visualVariable] = design.styles.nodes[visualVariable];
    }
  });
  console.log('active node styles', activeNodeStyles);

  // The visual variables currently applied to the edges
  var activeEdgeStyles = {};
  Object.keys(design.styles.edges).forEach(function (visualVariable) {
    if (design.styles.edges[visualVariable].active) {
      activeEdgeStyles[visualVariable] = design.styles.edges[visualVariable];
    }
  });
  console.log('active edge styles', activeEdgeStyles);
};

// In case the WebGL renderer is used, we must wait for FontAwesome to be loaded.
// http://www.w3.org/TR/css-font-loading/
if (document.fonts) {
  // document.fonts.ready() method is going to be replaced with
  // document.fonts.ready attribute in the future.
  var fontsReady = document.fonts.ready;
  if (typeof(fontsReady) == "function") {
    fontsReady = document.fonts.ready();
  }
  fontsReady.then(init);
}
else {
  // wait or use a polyfill such as:
  // https://github.com/zachleat/fontfaceonload
  // https://github.com/smnh/FontLoader
  setTimeout(init, 2000);
}

</script>
